<template>
    <div class="auth-container">
        <div class="auth-card">
            <h1 class="auth-title">登录 / 注册</h1>
            <div class="tab-buttons">
                <button :class="{ 'active': activeTab === 'login' }" @click="activeTab = 'login'">登录</button>
                <button :class="{ 'active': activeTab === 'register' }" @click="activeTab = 'register'">注册</button>
            </div>
            <div v-if="activeTab === 'login'">
                <input v-model="username" placeholder="用户名" class="auth-input" />
                <input v-model="password" type="password" placeholder="密码" class="auth-input" />
                <button @click="handleLogin" class="auth-button">登录</button>
            </div>
            <div v-else>
                <input v-model="newUsername" placeholder="新用户名" class="auth-input" />
                <input v-model="newPassword" type="password" placeholder="新密码" class="auth-input" />
                <button @click="handleRegister" class="auth-button">注册</button>
            </div>
            <p class="message">{{ message }}</p>
        </div>
    </div>
</template>

<script>
import { API_BASE_URL } from '../config'; // 导入公共变量
export default {
    data() {
        return {
            activeTab: 'login',
            username: '',
            password: '',
            newUsername: '',
            newPassword: '',
            message: '',
        };
    },
    methods: {
        async handleLogin() {
            const response = await fetch(`${API_BASE_URL}/login`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    username: this.username,
                    password: this.password,
                }),
            });
            const data = await response.json();  // 解析 JSON 响应
            debugger;
            if (response.ok) {
              // 登录成功，设置 localStorage
                localStorage.setItem('isLoggedIn', 'true');
                if (data.redirect) {
                    console.log("Redirecting to:", data.redirect);  // 调试信息
                    this.$router.push(data.redirect);  // 使用 Vue Router 跳转
                 } else {
                     console.error("Redirect path is undefined:", data);  // 添加错误日志
                 }
                // this.$router.push('/model-providers');
                // this.$router.push(data.redirect_url);
            } else {
                this.message = '用户名或密码错误';
            }
        },
        async handleRegister() {
            const response = await fetch(`${API_BASE_URL}/register`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    username: this.newUsername,
                    password: this.newPassword,
                }),
            });

            if (response.ok) {
                this.message = '注册成功，请登录';
                this.activeTab = 'login';
            } else {
                this.message = '注册失败，请重试';
            }
        },
    },
};
</script>

<style scoped>
.auth-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #f4f4f9;
}

.auth-card {
    background-color: #fff;
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    width: 350px;
}

.auth-title {
    text-align: center;
    margin-bottom: 20px;
    color: #333;
}

.tab-buttons {
    display: flex;
    margin-bottom: 20px;
}

.tab-buttons button {
    flex: 1;
    padding: 10px;
    border: none;
    background-color: #e0e0e0;
    cursor: pointer;
}

.tab-buttons button.active {
    background-color: #007bff;
    color: #fff;
}

.auth-input {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.auth-button {
    width: 100%;
    padding: 10px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.auth-button:hover {
    background-color: #0056b3;
}

.message {
    margin-top: 15px;
    text-align: center;
    color: #dc3545;
}
</style>